<!DOCTYPE html>
<html>
<head>
<title>Beam Dump Experiment Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f8f9fa;
  }
  canvas {
    border: 1px solid #dee2e6;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsDiagram" width="800" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsDiagram');
    const ctx = canvas.getContext('2d');

    // --- Style settings ---
    // The original has a hand-drawn, slightly rough look. We'll use a thick line width
    // and a font that mimics a typewriter or technical drawing.
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    const mainFont = '32px "Courier New", monospace';
    const captionFont = '26px "Times New Roman", serif';

    // --- 1. p beam & Arrow ---
    ctx.font = mainFont;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('p beam', 80, 200);

    ctx.beginPath();
    const arrowY = 210;
    const arrowStartX = 80;
    const arrowEndX = 280;
    const arrowheadWidth = 20;
    const arrowheadHeight = 12;

    // Line
    ctx.moveTo(arrowStartX, arrowY);
    ctx.lineTo(arrowEndX, arrowY);

    // Head
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - arrowheadWidth, arrowY - arrowheadHeight);
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - arrowheadWidth, arrowY + arrowheadHeight);
    ctx.stroke();

    // --- 2. Iron (beam dump) Block ---
    const ironBlock = { x: 320, y: 110, w: 220, h: 200 };
    ctx.strokeRect(ironBlock.x, ironBlock.y, ironBlock.w, ironBlock.h);

    ctx.font = mainFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Iron', ironBlock.x + ironBlock.w / 2, ironBlock.y + 60);
    ctx.fillText('(beam dump)', ironBlock.x + ironBlock.w / 2, ironBlock.y + 120);

    // --- 3. Muon Detector ---
    const detectorBlock = { x: 620, y: 170, w: 110, h: 80 };
    ctx.strokeRect(detectorBlock.x, detectorBlock.y, detectorBlock.w, detectorBlock.h);

    ctx.font = mainFont;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    // Use the Unicode character for the Greek letter mu (μ)
    ctx.fillText('\u03BC detector', 620, 160);

    // --- 4. Figure Caption ---
    ctx.font = captionFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('Fig. 4.13', canvas.width / 2, 400);

</script>
</body>
</html>